<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
          content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="./assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="./assets/css/demo.css" rel="stylesheet">
</head>
<body>


<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" >数字1</span>
    </div>
    <input type="text" class="form-control" aria-label="Sizing example input"
           aria-describedby="inputGroup-sizing-default" id="num1">
</div>

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" >数字2</span>
    </div>
    <input type="text" class="form-control" aria-label="Sizing example input"
           aria-describedby="inputGroup-sizing-default" id="num2">
</div>
<button type="button" class="btn btn-primary" id="addButton">点击两数加</button>
<div class="alert alert-secondary" role="alert">
    <label>相加结果为: </label>
    <span id="addResult">
    </span>
</div>

<!-- Core -->
<script src="./assets/vendor/jquery/jquery.min.js"></script>
<script src="./assets/vendor/popper/popper.min.js"></script>
<script src="./assets/js/bootstrap/bootstrap.min.js"></script>
<!-- FontAwesome 5 -->
<script src="./assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
<!-- Page plugins -->
<script src="./assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="./assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="./assets/vendor/input-mask/input-mask.min.js"></script>
<script src="./assets/vendor/nouislider/js/nouislider.min.js"></script>
<script src="./assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
<!-- Theme JS -->
<script src="./assets/js/theme.js"></script>

<script>
    add();
    function add() {
        var bnt = document.querySelector("#addButton");
        bnt.onclick = function () {
            // 1. 获取 num1 和 num2
            var num1 = document.querySelector("#num1");
            var num2 = document.querySelector("#num2");
            // 2. 判断是否有值
            if (num1.value.trim() === '' || num2.value.trim() === '') {
                alert("数字1 或者 数字2 为空");
                return;
            }
            // 3. jQuery 请求后端
            $.ajax({
                type: "post",
                url: "/add",
                data: {
                    "num1": num1.value,
                    "num2": num2.value
                },
                success: function (result) {
                    num1.value = '';
                    num2.value = '';
                    if (result != null) {
                        var addResult = document.querySelector("#addResult");
                        addResult.innerHTML = result;
                    }
                }
            });
        }
    }


</script>


</body>
</html>
